<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {getTableDataApi, getWorkDetailsAPi} from '@/api/user'
import {useRouter} from "vue-router";
import { useUserStore } from "@/store/modlues/user/user.js";
import { usePagination } from "@/utils/usePagination"
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
const router=useRouter()
const userStore=useUserStore()
//弹框
const centerDialogVisible = ref(false)
onMounted(()=>{
  centerDialogVisible.value=true;
})
const tableData = ref([])
const disagree=()=>{
  ElMessage.warning({
    message: '未同意承诺书不可评分'
  })
}

//选项框
const options = [
  {
    value: '0',
    label: '未评分',
  },
  {
    value: '1',
    label: '已评分',
  },
  {
    value: '2',
    label: '全部',
  }
]
const searchData = reactive({
  workName:"",
  workStatus:""
})
const total=ref(100)
const getTableData = ()=>{
  getTableDataApi({
    current:paginationData.currentPage,
    pageSize:paginationData.pageSize,
    workName:searchData.workName || undefined,
    workStatus:searchData.workStatus || undefined,
    workTeam:userStore.user.reviewRange
  }).then((res)=>{
    tableData.value=res.data.records
    paginationData.total = parseInt(res.data.total)
    ElMessage.success("查询成功")
  }).catch(()=>{
    tableData.value=[]
    ElMessage.error("查询失败")
  })
}

getTableData();
const idList=ref([])
//#region 改
const handleSearchDetail=(row)=>{
      tableData.value.forEach((s)=>{
        idList.value.push(s.id)
      })
      console.log(idList.value)
        router.push({
          path:'/score',
          query: {
            id:row.id,
            userId:row.userId,
            idList:JSON.stringify(idList.value)
          }
        })
}
</script>
<template>
  <div id="app" style="height: 100%;width: 100%">
    <div class="back">
      <div class="body-text" style="width: 1064px">

        <!--   头部分类和专业    -->
        <div style="width: 100%;border-radius: 5px;background-color: #0000CD;display: flex;flex-direction: column">
            <div style="margin-top: 15px;margin-left: 22px">
                <text style="color: white;font-size: 16px;font-weight: bolder;">专家评审您好！</text>
            </div>

            <!--      分类和专业      -->
            <div style="display: flex;flex-direction: row;margin-left: 22px;margin-bottom: 18px">
                <text style="color: white;font-size: 13px;font-weight: bolder;">您的评审分类为:
                  <template v-if="userStore.user.reviewRange==='1'">
                    思政科组
                  </template>
                  <template v-if="userStore.user.reviewRange==='2'">
                    公共基础课程组(不含思政)
                  </template>
                  <template v-if="userStore.user.reviewRangem==='3'">
                    专业技能课程一组
                  </template>
                  <template v-if="userStore.user.reviewRange==='4'">
                    专业技能课程二组
                  </template>
                </text>
            </div>
        </div>
          <div style="width: 100%;height: 600px;border: #181818 0px solid;margin-top: 15px;margin-bottom: 100px">
            <!--      作品名称 和 状态      -->
            <div style="display: flex;flex-direction: row">
              <el-input v-model="searchData.workName"  placeholder="请输入" input-style="font-size:12px" style="width: 300px">
                <template #prepend>作品名称</template>
              </el-input>
              <el-select
                  v-model="searchData.workStatus"
                  class="m-2"
                  placeholder="状态"
                  style="width: 150px;margin-left: 20px"
              >
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
              <el-button type="primary" icon="search" @click="getTableData" style="padding-left: 5px;margin-left: 40px"
              ><text style="margin-left: -5px;margin-right: 4px">查询</text></el-button>
            </div>
            <!--     表头       -->
            <div style="width: 100%;height: 45px;background-color: #F5F5F5;margin-top: 20px;display:flex;flex-direction: row;">
              <div style="width: 100px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                ">
                <text style="margin-left: 10px">序号</text>
              </div>
              <div style="width: 500px;
                display: flex;
                flex-direction: column;
                justify-content: center;">
                <text style="margin-left: 15px">作品名称</text>
              </div>
              <div style="width: 180px;
                display: flex;
                flex-direction: column;
                justify-content: center;">
                <text style="margin-left: 30px">提交时间</text>
              </div>
              <div style="width: 120px;
                display: flex;
                flex-direction: column;
                justify-content: center;">
                <text style="margin-left: 5px">得分</text>
              </div>
              <div style="width: 100px;
                display: flex;
                flex-direction: column;
                justify-content: center;">
                <text style="margin-left: 7px">操作</text>
              </div>
            </div>
            <!--    表格渲染    -->
            <div  style="margin-top: 10px;border-top: #ececec 1px solid;border-left: #ececec 1px solid;border-right: #ececec 1px solid;">
              <el-table  :data="tableData" :show-header="false"  style="width: 100%;z-index: 0" highlight-current-row>
                <el-table-column type="index" width="100" index="1"/>
                <el-table-column prop="workName" label="作品名称" width="500" />
                <el-table-column prop="updateTime" label="提交时间" width="150"/>
                <el-table-column prop="workStatus" label="得分" width="120">
                  <template #default="scope">
                    <el-tag type="danger" v-if="scope.row.workStatus=== '0'" effect="plain">未评分</el-tag>
                    <el-tag type="success" v-if="scope.row.workStatus === '1'" effect="plain">已评分</el-tag>
                  </template>
                </el-table-column>
                <el-table-column width="104" >
                  <template #default="scope">
                    <el-button v-if="scope.row.workStatus=== '1'" link type="primary" size="small" @click="handleSearchDetail(scope.row)">查看详细</el-button>
                    <el-button v-if="scope.row.workStatus=== '0'" link type="primary" size="small" @click="handleSearchDetail(scope.row)">评分</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!--     分页条       -->
            <div style="display: flex;flex-direction: row;margin-top: 40px;margin-left: 45%;z-index: -1">
              <el-pagination
                  background
                  :layout="paginationData.layout"
                  :page-sizes="paginationData.pageSizes"
                  :total="paginationData.total"
                  :page-size="paginationData.pageSize"
                  :currentPage="paginationData.currentPage"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
            </div>
          </div>

      </div>

      <!--    弹框      -->
      <el-dialog v-model="centerDialogVisible" style="margin-top: 100px;" title="承诺书"  width="60%" :close-on-click-modal="false"  center :show-close="false">
        <span style="font-size: 13px">一、本人自愿加入专家评委库，并严格通守其他各项规定和纪律，客现公正地为本次大开展评审工作。</span><br>
        <span style="font-size: 13px">二、本人将严格通守大赛评选工作的保密义务，不使用或拔露，也不许可他人使用或技器在评进工作中获悉的梦费企业和国队的基本估息、观点、想法、创意、知识产权、暂力成果、技术方法、商业计划、财务信息等商业秘密。</span><br>
        <span style="font-size: 13px">三、本人将严格技服大费评选规则、规程，以严肃相学的志度，客观公正、实事水是、专业独立地参与选工作，提出评隐息见，并对评港息见的真实性、公正性负责。</span><br>
        <span style="font-size: 13px">四、本人保证设入足够的时间精力，按时参加大赛评选相关工作，并愿通过电子部件、手机信和电等方式供得大组会有关评选工作的通知信息。</span><br>
        <span style="font-size: 13px">五、本人与参赛企业或队在在利害关嘉，可能影评工作的公正、本人将及时向大赛组费会声明共提出道申通，如发现其他评委也存在相同情，本人也将及时向大赛组委会反映情况。</span><br>
        <span style="font-size: 13px">六、未经大赛组委会授权，本人不以任式与参赛企业或个人联系。</span>
        <span style="font-size: 13px">七、未经大赛组委会授权，本人不以大赛评要名义参与任何与大赛评选无关的活动，也不以大赛评要名义对外发表任何评论。</span><br>
        <span style="font-size: 13px">
八、本人担任本次大赛的评委已经取得了应当取得的所有授权、许司、同息、批准，并不会违反对本人适用的法律、法规或本人已经签订的合同，协议或其他文件。
          </span><br>
        <span style="font-size: 13px">九、本人承诺只在大赛组委会授权的范国内进行评进工作，不超授权权，并且不利用职务之便为自身、他人以及所在工作机构谋得利益。</span>
        <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="centerDialogVisible = false">
                我已阅读并同意
              </el-button>
              <el-button @click="disagree()">不同意</el-button>
            </span>
        </template>
      </el-dialog>

      <!-- 底部 -->
      <div class="black-bottom">
        <text class="black-text" style="margin-top: 12px;" >如有使用问题，请联系唐工：17856424152</text>
        <text class="black-text" style="margin-bottom: 12px;" >Copyright ? 2003-2024 zhihuijiaoxue. All rights reserved.</text>
      </div>


    </div>

  </div>
</template>

<style scoped>

.dialog-footer button:first-child {
  margin-right: 10px;
}



.example-showcase .el-dropdown-link {

  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.bottom{
  margin-top: 80px;
  padding-top: 18px;
  padding-bottom: 18px;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.black-text{

  color:#afafaf;
  font-size: 11px;

}

.black-bottom{
  margin-top: 20px;
  background-color: black;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}




.body-text{
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3% 3% 3% 3%;

  margin-left: 15%;
  margin-right: 15%;

}

.back{
  width:100%;
  padding-top: 1.2%;
  background: #ececec;
}

</style>
